import { Alert, Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import ScreenWrapper from '../../components/ScreenWrapper'
import { Button } from 'react-native'
import { useAuth } from '../../contexts/AuthContext'
import { supabase } from '../../lib/supabase'
import { wp, hp } from '../../helper/common'
import {theme} from '../../constants/theme'
import Icon from '../../assets/icons/index'
import { useRouter } from 'expo-router'
import Avatar from '../../components/Avatar'

const Home = () => {

  const { user, setAuth } = useAuth();

  const router = useRouter();

  const onLogout = async ()=> {
    //setAuth(null)
    const {error} = await supabase.auth.signOut();
    if(error) {
      Alert.alert("Sign out", "Error sign out!");
    }
  }

  return (
    <ScreenWrapper bg='white'>
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>LinkUp</Text>
          <View style={styles.icons}>
            <Pressable onPress={()=>router.push('notifications')}>
              <Icon name='heart' size={hp(3.2)} strokeWidth={2} color={theme.colors.text}></Icon>
            </Pressable>
            <Pressable onPress={()=>router.push('newPost')}>
              <Icon name='plus' size={hp(3.2)} strokeWidth={2} color={theme.colors.text}></Icon>
            </Pressable>
            <Pressable onPress={()=>router.push('profile')}>
              <Avatar uri={user?.image} style={{borderWidth: 2}} size={hp(4.3)} rounded={theme.radius.sm}></Avatar>
            </Pressable>
          </View>
        </View>
      </View>
      <Button title='logout' onPress={onLogout}></Button>
    </ScreenWrapper>
  )
}

export default Home

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 10,
    marginHorizontal: wp(4)
  },
  title: {
    color: theme.colors.text,
    fontSize: hp(3.2),
    fontWeight: theme.fonts.bold
  },
  avatarImage: {
    height: hp(4.3),
    width: hp(4.3),
    borderRadius: theme.radius.sm,
    borderCurve: 'continuous',
    borderColor: theme.colors.gray,
    borderWidth: 3
  },
  icons: {
    flexDirection: 'row',
    justifyContent: 'center',
    color: theme.colors.text,
    gap: 18
  },
  pull: {
    position: 'absolute',
    right: -10,
    top: -4,
    height: hp(2.2),
    width: hp(2.2),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    backgroundColor: theme.colors.roseLigth
  },
  pillText: {
    color: 'white',
    fontSize: hp(1.2),
    fontWeight: theme.fonts.bold
  }
})